<template>
  <div id="DataMaintenance-holidayManage">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvnzk0')}}</span>
      </div>
      <!-- <div class="cr-head-right">
        <el-button type="primary" size="mini" @click="handAdd">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvpdg0')}}</el-button>
      </div>-->
    </div>
    <div class="pAll12 bt_EBEEF5">
      <div class="holidayManage-cont holidaySetting-setting__box">
        <!-- 日历开始 -->
        <div class="calendar-cont">
          <div class="flex-wrap">
            <div class="flex-al mb12 mr15">
              <div class="select-box" style="width:100px;">
                <el-select
                  v-model="calendar.year"
                  filterable
                  :placeholder="$t('gradenSet.gradenSet.holidayManage.50zghqlvpsg0')"
                  @change="handleChange"
                >
                  <el-option
                    v-for="(item,index) in yearlist"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="flex-al mb12 mr15">
              <div class="select-box" style="width:100px;">
                <el-select
                  v-model="calendar.month"
                  filterable
                  :placeholder="$t('gradenSet.gradenSet.holidayManage.50zghqlvq640')"
                  @change="handleChange"
                >
                  <el-option
                    v-for="(item,index) in monthlist"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="flex-al mb12 mr15">
              <div class="select-box" style="width:100px;">
                <el-select
                  v-model="calendar.holiday"
                  filterable
                  :placeholder="$t('gradenSet.gradenSet.holidayManage.50zghqlvqjc0')"
                  style="width:120px"
                  @change="handleholidayChange"
                >
                  <el-option
                    v-for="(item,index) in holidayList"
                    :key="index"
                    :label="item.holidays_name"
                    :value="item.holidays_day"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="flex-al mb12 ml10">
              <el-button size="mini" @click="handleBackToday">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvqxs0')}}</el-button>
            </div>
          </div>
          <div class="calendar-left">
            <ul class="week" id="wk">
              <li>一</li>
              <li>{{$t('gradenSet.gradenSet.holidayManage.50zghqlvrzg0')}}</li>
              <li>{{$t('gradenSet.gradenSet.holidayManage.50zghqlvsds0')}}</li>
              <li>{{$t('gradenSet.gradenSet.holidayManage.50zghqlvspc0')}}</li>
              <li>{{$t('gradenSet.gradenSet.holidayManage.50zghqlvszw0')}}</li>
              <li class="color-d72">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvtc00')}}</li>
              <li class="color-d72">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvtmg0')}}</li>
            </ul>
            <div id="day">
              <ul class="daylist">
                <li
                  v-for="(item, index) in daylist"
                  :key="index"
                  :style="{ 'background-color': item.holidays_status == '0' ? '#FFE6E5' : '' }"
                  @click="handAdd(item)"
                >
                  <p>{{ item.day }}</p>
                  <!-- <p v-if="item.type == 'year'" class="holi-tips">{{item.holidays_name}}</p>
                  <p v-if="item.type == 'year'" class="tips tips_1">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvtxk0')}}</p>
                  <p v-else-if="item.type == 'course'" class="tips tips_2">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvu880')}}</p>-->
                  <p v-if="item.holidays_name" class="holi-tips">{{item.holidays_name}}</p>
                  <p v-if="item.holidays_status == 0" class="tips tips_1">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvtxk0')}}</p>
                  <p v-else-if="item.holidays_status == 1" class="tips tips_2">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvuic0')}}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 日历结束 -->
        <div class="tableDiv caldar-add" ref="auto_height_table">
          <settingTableCont :tableData="tableList" @switchChange="switchChange">
            <!-- 按钮操作组********start -->
            <el-table-column
              ref="fixedColumn"
              :label="$t('gradenSet.gradenSet.holidayManage.50zghqlvuvg0')"
              align="center"
              width="120px"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click.native.prevent="handEdit(scope.row)">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvv680')}}</el-button>
                <el-button type="text" size="small" @click.native.prevent="handDelete(scope.row)">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvvgc0')}}</el-button>
              </template>
            </el-table-column>
            <!-- 按钮操作组********end -->
          </settingTableCont>
          <!-- 分页 -->
          <el-pagination
            style="margin: 10px;"
            :current-page.sync="paging.curPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="paging.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paging.pageTotal"
            @current-change="curPageChange"
            @size-change="pageSizeChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 侧边弹窗******新增或者编辑节假日 -->
    <el-drawer
      :title="propData.isEdit? $t('gradenSet.gradenSet.holidayManage.add1') : $t('gradenSet.gradenSet.holidayManage.add2')"
      v-if="propData.cancelVisible"
      :visible.sync="propData.cancelVisible"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box"
      :before-close="propData.handleClose"
    >
      <div class="slider-btn">
        <el-button v-if="!propData.isEdit" type="primary" size="mini" @click="onSubmit">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvvr40')}}</el-button>
        <el-button v-else type="primary" size="mini" @click="onEditSubmit">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvvr40')}}</el-button>
      </div>
      <div class="slider-content pAll20">
        <el-form label-width="90px" :model="ruleForm" ref="ruleForm">
          <el-form-item :label="$t('gradenSet.gradenSet.holidayManage.50zghqlvw4o0')" prop="name" :rules="[{ required: true, message: $t('gradenSet.gradenSet.holidayManage.50zghqlvwds0') }]">
            <el-input clearable :placeholder="$t('gradenSet.gradenSet.holidayManage.50zghqlvwds0')" v-model="ruleForm.name" style="width:320px;"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('gradenSet.gradenSet.holidayManage.50zghqlvwpc0')"
            prop="starttime"
            :rules="[{ required: true, message: $t('gradenSet.gradenSet.holidayManage.50zghqlvwyc0') }]"
          >
            <el-date-picker
              type="date"
              :placeholder="$t('gradenSet.gradenSet.holidayManage.50zghqlvx740')"
              value-format="yyyy-MM-dd"
              v-model="ruleForm.starttime"
              style="width:320px!important;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('gradenSet.gradenSet.holidayManage.50zghqlvxfk0')" prop="type" :rules="[{ required: true, message: $t('gradenSet.gradenSet.holidayManage.add3') }]">
            <el-radio-group v-model="ruleForm.type">
              <el-radio label="1">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvxoc0')}}</el-radio>
              <el-radio label="0" v-if="!ruleForm.noRest">{{$t('gradenSet.gradenSet.holidayManage.50zghqlvxwk0')}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('gradenSet.gradenSet.holidayManage.50zghqlvy500')">
            <el-input
              type="textarea"
              style="width:320px;"
              v-model="ruleForm.intro"
              :placeholder="$t('gradenSet.gradenSet.holidayManage.50zghqlvydk0')"
            ></el-input>
          </el-form-item>
        </el-form>
        <p class="color-red">* {{$t('gradenSet.gradenSet.holidayManage.50zghqlvyno0')}}</p>
      </div>
    </el-drawer>
    <!-- 删除节假日 -->
    <popTips
      :dialogVisable="delItem"
      :popTipsCont="popTips_del"
      @handConfirm="handleDelCom"
      @handCancel="delItem=false"
      @handleCloseTip="delItem=false"
    ></popTips>
  </div>
</template>

<script>
import settingTableCont from "@/components/tables/settingTableCont.vue";
import popTips from "@/components/common/popTips/popTips.vue";
import httpApi from "./holidayManage.js";

export default {
  name: "setting",
  components: {
    settingTableCont,
    popTips
  },
  data() {
    let item = {
      a1: this.$t('gradenSet.gradenSet.holidayManage.50zghqlvyw80'),
      a2: "2019-01-22 — 2019-01-30",
      a3: this.$t('gradenSet.gradenSet.holidayManage.50zghqlvxwk0'),
      a4:
        this.$t('gradenSet.gradenSet.holidayManage.50zghqlvz4o0')
    };
    return {
      delId: "",
      holidays_id: "",
      delItem: false, //删除节假日
      //删除节假日****弹窗
      popTips_del: {
        btn_text1: this.$t('gradenSet.gradenSet.holidayManage.50zghqlvzd40'),
        btn_text2: this.$t('gradenSet.gradenSet.holidayManage.50zghqlvzlw0'),
        title: this.$t('gradenSet.gradenSet.holidayManage.50zghqlvzu40'),
        context: this.$t('gradenSet.gradenSet.holidayManage.50zghqlw0280')
      },
      // 日历********开始
      yearlist: [],
      monthlist: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      holidayList: [this.$t('gradenSet.gradenSet.holidayManage.50zghqlvyw80'), this.$t('gradenSet.gradenSet.holidayManage.50zghqlw0as0'), this.$t('gradenSet.gradenSet.holidayManage.50zghqlw0jw0')],
      daylist: [],
      calendar: {
        year: "",
        month: "",
        holiday: ""
      },
      // 日历********结束
      //检索-table
      filter: {
        keyword: ""
      },
      // 表格数据
      tableList: {
        // 表格的列
        columns: [
          {
            fieldstring: "a1",
            fieldname: this.$t('gradenSet.gradenSet.holidayManage.50zghqlw0sk0'),
            show: "1"
            // sortable: true
          },
          {
            fieldstring: "a2",
            fieldname: this.$t('gradenSet.gradenSet.holidayManage.50zghqlw1300'),
            show: "1"
          },
          {
            fieldstring: "a3",
            fieldname: this.$t('gradenSet.gradenSet.holidayManage.50zghqlvxfk0'),
            show: "1"
          },
          {
            fieldstring: "a4",
            fieldname: this.$t('gradenSet.gradenSet.holidayManage.50zghqlvy500'),
            show: "1"
          }
        ],
        // 表格数据
        list: Array(10).fill(item),
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: 0
        }
      },
      // 分页
      paging: {
        curPage: 1,
        pageSize: 10,
        pageTotal: 10
      },
      //侧边弹窗******新增或者编辑节假日
      propData: {
        cancelVisible: false, //新增或者编辑节假日
        isEdit: false, //是否编辑节假日
        //select
        options: [
          {
            value: this.$t('gradenSet.gradenSet.holidayManage.50zghqlw1ds0'),
            label: this.$t('gradenSet.gradenSet.holidayManage.50zghqlw1pc0')
          }
        ]
      },
      // 表单
      ruleForm: {
        name: "",
        starttime: "",
        endtime: "",
        type: "",
        intro: ""
      },
      // 表单验证
      rules: {
        postpart_name: [
          {
            required: true,
            message: this.$t('gradenSet.gradenSet.holidayManage.50zghqlw1y40'),
            trigger: "blur"
          }
        ],
        region: [
          {
            required: true,
            message: this.$t('gradenSet.gradenSet.holidayManage.50zghqlw28k0'),
            trigger: "change"
          }
        ],
        postpart_name1: [
          {
            required: true,
            message: this.$t('gradenSet.gradenSet.holidayManage.50zghqlw2j40'),
            trigger: "blur"
          }
        ],
        region1: [
          {
            required: true,
            message: this.$t('gradenSet.gradenSet.holidayManage.50zghqlw2rk0'),
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    let date = new Date();
    this.calendar.year = date.getFullYear();
    this.yearlist.push(this.calendar.year);
    for (let i = 1; i <= 2; i++) {
      this.yearlist.push(this.calendar.year + i);
      this.yearlist.unshift(this.calendar.year - i);
    }
    this.calendar.month = date.getMonth() + 1;

    let dateTime = new Date();
    let year = dateTime.getFullYear();
    let month = dateTime.getMonth() + 1;
    let days = new Date(year, month, 0).getDate();
    for (let i = 0; i < days; i++) {
      let dt = year + "-" + month + "-" + (i + 1);
      let week = this.$Common.getWeek(dt);
      this.daylist.push({
        type: i % 5 == 0 ? "year" : i % 5 == 1 ? "course" : "",
        week: week,
        day: i + 1 < 10 ? "0" + (i + 1) : i + 1
      });
    }
    console.log(this.daylist);
    // let day = `${this.calendar.year}-${
    //   this.calendar.month < 10 ? "0" + this.calendar.month : this.calendar.month
    // }`;
    // this.initData(day);
    // this.getMonthList(day);
    // this.holidays();
    this.getHolidaysList();
    this.getHolidaysApi();
    this.getMonthList();
  },
  methods: {
    handleBackToday() {
      let date = new Date();
      this.calendar.year = date.getFullYear();
      this.calendar.month = date.getMonth() + 1;
      this.getHolidaysList();
      this.getMonthList();
    },
    handleholidayChange() {
      let date = this.calendar.holiday.split("-");
      this.calendar.year = date[0];
      this.calendar.month = date[1];
      this.getHolidaysList();
      this.getMonthList();
    },
    handleChange() {
      this.getMonthList();
    },
    getMonthList() {
      let dayData = this.calendar.year + "-" + this.calendar.month;
      httpApi
        .getMonthList({
          day: dayData
        })
        .then(res => {
          console.log(res, this.$t('gradenSet.gradenSet.holidayManage.50zghqlw2zg0'));
          this.daylist = res.data.result;
          this.daylist.forEach(item => {
            // new Date("2019/12/29").getDay();
            let dayData = item.year + "/" + item.month + "/" + item.day;
            if (
              new Date(dayData).getDay() == 6 ||
              new Date(dayData).getDay() == 0
            ) {
              if (item.holidays_status == 1) {
                console.log('ddd')
              } else {
                item.holidays_status = 0;
              }
            }
          });
          let pushDay = this.getWeek(this.calendar.year, this.calendar.month);
          for (let i = 0; i < pushDay - 1; i++) {
            this.daylist.unshift({});
          }
        });
    },
    getWeek(year, month) {
      //1.根据年度和月份，创建日期
      //应该先对year,month进行整数及范围校验的。
      var d = new Date();
      d.setYear(year);
      d.setMonth(month - 1);
      d.setDate(1);
      console.log(d);
      //获得周几
      var weeks = [7, 1, 2, 3, 4, 5, 6];
      return weeks[d.getDay()];
    },
    handleDelCom() {
      httpApi
        .delHolidaysAction({
          holidays_id: this.delId
        })
        .then(res => {
          if (res.data.error == 0) {
            this.$message({
              message: res.data.errortip,
              type: "success"
            });
          } else {
            this.$message({
              message: res.data.errortip,
              type: "error"
            });
          }
          this.delItem = !this.delItem;
          this.getHolidaysList();
          this.getMonthList();
        });
    },
    getHolidaysApi() {
      httpApi.getHolidaysApi({}).then(res => {
        this.holidayList = res.data.result.list;
      });
    },
    getHolidaysList() {
      httpApi
        .getHolidaysList({
          keyword: "",
          p: this.paging.curPage ,
          num: this.paging.pageSize
        })
        .then(res => {
          console.log(res);
          this.paging.pageTotal = Number(res.data.result.all_num);
          this.tableList.columns = res.data.result.field;
          this.tableList.list = res.data.result.list;
        });
    },
    //检索
    search() {
      console.log(1111);
    },
    changeMonth(v) {
      console.log(v);
      if (this.calendar.month == 1 && v == -1) {
        this.calendar.month = 12;
      } else if (this.calendar.month == 12 && v == 1) {
        this.calendar.month = 1;
      } else {
        this.calendar.month += v;
      }
      // let day = `${this.calendar.year}-${
      //   this.calendar.month < 10
      //     ? "0" + this.calendar.month
      //     : this.calendar.month
      // }`;
      // this.getMonthList(day);
      // this.holidays();
    },
    changeCalendar() {
      // let day = `${this.calendar.year}-${
      //   this.calendar.month < 10
      //     ? "0" + this.calendar.month
      //     : this.calendar.month
      // }`;
      // this.initData(day);
      // this.getMonthList(day);
      // this.holidays();
    },
    //新增
    handAdd(item) {
      console.log(item);
      // this.propData.isEdit = false; //是否编辑节假日
      // this.propData.cancelVisible = !this.propData.cancelVisible;
      // this.ruleForm = {};

      if (item.holidays_id) {
        this.propData.isEdit = true; //是否编辑节假日
        let obj = this.tableList.list.find(
          val => val.holidays_id == item.holidays_id
        );
        this.ruleForm.name = obj.holidays_name;
        this.ruleForm.starttime = obj.holidays_day;
        this.ruleForm.type = obj.holidays_status;
        this.ruleForm.intro = obj.holidays_note;
        this.holidays_id = obj.holidays_id;
        this.$set(this.ruleForm, "noRest", false);
      } else {
        this.propData.isEdit = false;
        this.ruleForm = {};
        this.$set(
          this.ruleForm,
          "starttime",
          item.year + "-" + item.month + "-" + item.day
        );
        let dayData = item.year + "/" + item.month + "/" + item.day;
        if (
          new Date(dayData).getDay() == 6 ||
          new Date(dayData).getDay() == 0
        ) {
          this.$set(this.ruleForm, "noRest", true);
          // this.$set(this.ruleForm,'holidays_status',1)
        }
      }
      this.propData.cancelVisible = !this.propData.cancelVisible;
    },
    //编辑
    handEdit(row) {
      this.$set(this.ruleForm, "name", row.holidays_name);
      this.$set(this.ruleForm, "starttime", row.holidays_day);
      this.$set(this.ruleForm, "type", row.holidays_status);
      this.$set(this.ruleForm, "intro", row.holidays_note);
      // this.ruleForm.name = row.holidays_name;
      // this.ruleForm.starttime = row.holidays_day;
      // this.ruleForm.type = row.holidays_status;
      // this.ruleForm.intro = row.holidays_note;
      this.holidays_id = row.holidays_id;
      this.propData.isEdit = true; //是否编辑节假日
      this.propData.cancelVisible = !this.propData.cancelVisible;
      console.log(row);
    },
    //删除
    handDelete(row) {
      console.log(row);
      this.delId = row.holidays_id;
      this.delItem = !this.delItem;
    },
    //侧边弹窗 - 新增 - 提交
    onSubmit() {
      this.$refs.ruleForm.validate(val => {
        if (val) {
          httpApi
            .addHolidaysAction({
              holidays_name: this.ruleForm.name,
              holidays_day: this.ruleForm.starttime,
              holidays_status: this.ruleForm.type,
              holidays_note: this.ruleForm.intro
            })
            .then(res => {
              if (res.data.error == 0) {
                this.$message({
                  message: res.data.errortip,
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.data.errortip,
                  type: "error"
                });
              }
              this.propData.cancelVisible = !this.propData.cancelVisible;
              this.getHolidaysList();
              this.getMonthList();
            });
        } else {
          return false;
        }
      });
    },
    //侧边弹窗 - 编辑 - 提交
    onEditSubmit() {
      this.$refs.ruleForm.validate(val => {
        if (val) {
          httpApi
            .updateHolidaysAction({
              holidays_name: this.ruleForm.name,
              holidays_day: this.ruleForm.starttime,
              holidays_status: this.ruleForm.type,
              holidays_note: this.ruleForm.intro,
              holidays_id: this.holidays_id
            })
            .then(res => {
              if (res.data.error == 0) {
                this.$message({
                  message: res.data.errortip,
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.data.errortip,
                  type: "error"
                });
              }
              this.propData.cancelVisible = !this.propData.cancelVisible;
              this.getHolidaysList();
              this.getMonthList();
            });
        } else {
          return false;
        }
      });
    },
    // 启用状态点击
    switchChange(v1, v2) {
      console.log(v1, v2);
    },
    // 页码变化
    curPageChange(v) {
      this.paging.curPage = v;
      this.getHolidaysList();
      this.getMonthList();
    },
    // pageSize改变
    pageSizeChange(v) {
      this.paging.curPage = 1;
      this.paging.pageSize = v;
      this.getHolidaysList();
      this.getMonthList();
    },
    //侧边弹窗-关闭
    handleClose(done) {
      done();
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        if (document.body.clientWidth > 1400) {
          this.tableList.options.tableHeight = this.$Tool.getTableHeight(
            this.$refs.auto_height_table.getBoundingClientRect().top + 70
          );
        } else {
          this.tableList.options.tableHeight = 500 + "px";
        }
      }
    });
  }
};
</script>

<style lang="less">
// 节假日设置样式
.holidaySetting-setting__box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  .color-d72 {
    color: #d72d2d;
  }
  //日历样式
  .calendar-cont {
    width: 45%;
    min-width: 520px;
    padding-right: 20px;
    margin-bottom: 20px;
    // 筛选框样式
    .select-box {
      .el-input__inner,
      .el-input__icon {
        height: 34px;
        line-height: 34px;
      }
      .el-input__inner {
        border: none;
        border-radius: 0%;
        border-bottom: 1px solid #ddd;
      }
      .el-icon-arrow-up {
        color: #1d1f29;
        font-size: 16px;
      }
      .el-icon-arrow-up:before {
        content: "\e78f";
      }
    }
    .flex-wrap .el-button--mini {
      padding: 10px 20px;
    }
    // 日历列表样式
    .calendar-left {
      #wk {
        width: 100%;
        border: 1px solid #ddd;
        border-bottom: none;
        li {
          display: inline-block;
          width: 14.2%;
          text-align: center;
          padding: 4% 0px;
        }
      }

      #day {
        border: 1px solid #ddd;
        border-bottom: none;
        border-right: none;
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            width: 14.2857%;
            height: 80px;
            text-align: center;
            border: 1px solid #ddd;
            border-top: none;
            border-left: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            cursor: pointer;
            position: relative;
            .holi-tips {
              position: absolute;
              bottom: 5px;
              left: 50%;
              transform: translateX(-50%);
              font-size: 12px;
              color: #d72e2c;
            }
            .tips {
              position: absolute;
              top: 0;
              left: 0;
              width: 20px;
              height: 20px !important;
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .tips_1 {
              background-color: #d72d2d;
            }
            .tips_2 {
              background-color: #20a8d8;
            }
          }
        }
      }
    }
  }
  .tableDiv {
    width: 55%;
    // 表格样式
    .el-table tbody td {
      // border-bottom: 1px dashed #ddd;
    }
  }
  @media screen and (max-width: 1600px) {
    .calendar-cont {
      min-width: 420px;
    }
  }
  @media screen and (max-width: 1400px) {
    .calendar-cont {
      min-width: 520px;
    }
    .tableDiv {
      width: 100%;
    }
  }
}
// 此样式为了解决 小屏幕分页 位置发生偏移
.caldar-add .table-setting-cont{
  height: auto !important;
}
</style>
